<template>
	<div style="padding:0 30px 50px;">
		<!--<div class="filter-container">
    		<el-input style="width: 180px;" class="filter-item" :placeholder="$t('cash.userNumber')" v-model="searchCashData.userId"> </el-input>
    		<el-input style="width: 180px;" class="filter-item" :placeholder="$t('cash.bankName')" v-model="searchCashData.bankname"> </el-input>
    		<el-select v-model="searchCashData.State" :placeholder="$t('cash.auditStatus')" style="width: 180px;" class="filter-item">
    			<el-option :value="$t('cash.unaudited')"></el-option>
    			<el-option :value="$t('cash.reviewAndPassThrough')"></el-option>
    			<el-option :value="$t('cash.reviewAndDismissal')"></el-option>
    			<el-option :value="$t('cash.alreadyMadeMoney1')"></el-option>
    		</el-select>
    		<el-select v-model="searchCashData.Type" :placeholder="$t('cash.presentType')" style="width: 180px;" class="filter-item">
    			<el-option :value="$t('cash.check')"></el-option>
    			<el-option :value="$t('cash.onlineBanking')"></el-option>
    		</el-select>
    		<el-date-picker :editable=false style="width: 180px;" class="filter-item" :placeholder="$t('cash.applicationStartDate')" format="yyyy 年 MM 月 dd 日" type="date" v-model="searchCashData.startDate"></el-date-picker>
    		<el-date-picker :editable=false style="width: 180px;" class="filter-item" :placeholder="$t('cash.applicationEndDate')" format="yyyy 年 MM 月 dd 日" type="date" v-model="searchCashData.endDate"></el-date-picker>
    		<el-button class="blue-btn mini2-btn" @click="handleFilter">{{$t('cash.query')}}</el-button>
  			<el-button class='blue-btn mini2-btn' @click='delSelect()'>{{$t('cash.empty')}}</el-button>
		</div>-->
		
		<div class="search">
	  		<div class="search-input">
	  			<div>
	  				<label>{{ $t('cash.userNumber') }}：</label>
	  				<el-input v-model="searchCashData.userId" class="block-ipt"></el-input>
	  			</div>
	  			<div>
	  				<label>{{ $t('cash.bankName') }}：</label>
	  				<el-input v-model="searchCashData.bankname" class="block-ipt"></el-input>
	  			</div>
	  			<div>
					<label>{{ $t('cash.auditStatus') }}：</label>
					<el-select :placeholder="$t('placeH.All')" v-model="searchCashData.State" clearable class='filter-item condition block-ipt'>
						<el-option :value="$t('search.Pending')"></el-option>
		    			<el-option :value="$t('button.Approve')"></el-option>
		    			<el-option :value="$t('button.Reject')"></el-option>
		    			<el-option :value="$t('cash.alreadyMadeMoney1')"></el-option>
					</el-select>
				</div>
				<div>
					<label>{{ $t('cash.presentType') }}：</label>
					<el-select :placeholder="$t('placeH.All')" v-model="searchCashData.Type" clearable class='filter-item condition block-ipt'>
						<el-option :value="$t('cash.check')"></el-option>
						<el-option :value="$t('cash.onlineBanking')"></el-option>
					</el-select>
				</div>
	  			<div>
	  				<label>{{ $t('cash.applicationStartDate') }}：</label>
	  				<el-date-picker v-model="searchCashData.startDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  			<div>
	  				<label>{{ $t('cash.applicationEndDate') }}：</label>
	  				<el-date-picker v-model="searchCashData.endDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  		</div>
	  		<div class="search-btn">
	  			<el-button class="blue-btn mini2-btn" @click="handleFilter">{{$t('button.search')}}</el-button>
  				<el-button class='blue-btn mini2-btn' @click='delSelect()'>{{$t('button.Reset')}}</el-button>
	  		</div>
		</div>
		<!--提现列表-->
		<el-table stripe :key='tableKey' :data='withdrawCashDatas' v-loading.body="listLoading" border fit highlight-current-row style="width: 100%;" height=500>
    		<el-table-column align="center" :label="$t('index.Number')" fixed="left" width="70px" type='index'> </el-table-column>
    		<el-table-column align="center" :label="$t('cash.userNumber')" width="150px" prop="userId"> 
      		</el-table-column>
      		<el-table-column width="150px" align="center" :label="$t('AuMer.RegistrationName')" prop="mername">
	    	</el-table-column>
	    	<el-table-column width="200px" align="center" :label="$t('cash.applicationTime')" prop="startTime">
	  		</el-table-column>
	    	<el-table-column width="150px" align="center" :label="$t('cash.auditStatus')" prop="state" :formatter='judge'>
	   		</el-table-column>
	   		<el-table-column width="150px" align="center" :label="$t('cash.presentType')" prop="type" :formatter='judgeType'>
	   		</el-table-column>
	  		<el-table-column width="150px" align="center" :label="$t('cash.amountOfCash')+currency" prop="withdrawal_amount" :formatter='judgeMoney'>
	  		</el-table-column>
	  		<el-table-column width="150px" align="center" :label="$t('cash.cankCardNumber')" prop="bankCard">
	  		</el-table-column>
	  		 <el-table-column width="150px" align="center" :label="$t('cash.cardholder')" prop="drawname">
			</el-table-column>
			<el-table-column width="150px" align="center" :label="$t('AuMer.RegistrationName')" prop="bankname">
	    	</el-table-column>
	    	<el-table-column width="150px" align="center" :label="$t('cash.auditTime')" prop="inspectTime">
	    	</el-table-column>
	    	<el-table-column width="150px" align="center" :label="$t('cash.remittanceDate')" prop="remitTime">
	    	</el-table-column>
	        <el-table-column width="150px" align="center" :label="$t('cash.notes')" prop="memo">
	   		</el-table-column>
	  		<el-table-column width="200px" align="center" :label="$t('cash.examine')">
	  	  		<template scope="scope">
	  				<el-button :disabled="scope.row.state==='2' || scope.row.state==='3' ?true:false" class='blue-btn mini-btn' size="small" @click="handerCheckCashPass(scope.row.id,scope.row.type,scope.row.state)">{{$t('cash.adopt')}}</el-button>
	  				<el-button :disabled="scope.row.state==='1' || scope.row.state==='3' ?true:false" class='blue-btn mini-btn' size="small" @click="handerCheckCashReject(scope.row.id,scope.row.type,scope.row.state)">{{$t('cash.reject')}}</el-button>
	  	  		</template>
			</el-table-column>
			<el-table-column width="150px" align="center" :label="$t('index.Operation')">
	  	  		<template scope="scope">
	  				<el-button :disabled="scope.row.state==='1'?false:true" class='blue-btn mini-btn' @click="handerCheckCashPay(scope.row.id,scope.row.state)">{{$t('cash.playMoney')}}</el-button>
	  	  		</template>
			</el-table-column>
  		</el-table>
  		
  		<div v-show="!listLoading" class="pagination-container">
    		<el-pagination :total="res.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchCashData.page" :page-sizes="[10,20,30, 50]" :page-size="searchCashData.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  		</div>
	</div>
</template>

<script>
	import { withdrawCashAll,checkCash,withdrawCashPay } from 'api/merchantWithdrawCash/index';
	import { Message , MessageBox} from 'element-ui';
	import router from 'router/index'
	export default {
		name: 'WithdrawalCash',
		data(){
			return {
				currency:localStorage.getItem('companyId') === '2' ? '(A$)' : '(HK$)',
				listLoading:true,
			    tableKey: 0,
			    res:[],
				withdrawCashDatas:[],
				//按条件搜索订单所需参数
				searchCashData:{
					State:'',
					userId:'',
					bankname:'',
					startDate:'',
					Type:'',
					endDate:'',
					page:1,
					pageSize:10
				},
				list: null,
//			    total: null,//查询得知总订单数
			    //第一次进提现
			    oneCashData:{
			    	
			    },
			}
		},
		created () {
			this.getWithdrawCashList(this.oneCashData);
		},
		methods: { 
			//清空筛选条件
			delSelect(){
				this.searchCashData.State='';
				this.searchCashData.userId='';
				this.searchCashData.bankname='';
				this.searchCashData.Type = '';
				this.searchCashData.startDate='';
				this.searchCashData.endDate='';
				this.handleFilter();
			},
			//格式化显示数据
			judge(data){
				let state = data.state
				if(state === '0'){
					return state = '未审核'
				}
				if(state === '1'){
					return state = '审核通过'
				}
				if(state === '2'){
					return state = '审核驳回'
				}
				if(state === '3'){
					return state = '已打款'
				}
			},
			//格式化提现金额
			judgeMoney(row){
				let formatMoney = row.withdrawal_amount;
				// return formatMoney;
				return formatMoney =  this.fmoney(formatMoney,2);
			},
			// 格式化金额
			fmoney(s, n){   
				s = s / 100;
				n = n > 0 && n <= 20 ? n : 2;   
				s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   
				var l = s.split(".")[0].split("").reverse(),   
				r = s.split(".")[1];   
				let t = "";   
				for(let i = 0; i < l.length; i ++ )   
				{   
					t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");   
				}   
				return t.split("").reverse().join("") + "." + r;
			},
			//格式化显示数据
			judgeType(data){
				return data.type == '0' ? this.$t('cash.check') : this.$t('cash.onlineBanking');
			},
			//封装了提现查询的方法
			getWithdrawCashList(data){
				this.listLoading = true;
				withdrawCashAll(data).then(res => {
					this.listLoading = false;
					// console.log('提现查询返回的数据--------');
					this.res = res.value;
					// console.log(res.value);
					this.withdrawCashDatas = res.value.rows;
//					console.log(this.withdrawCashDatas)
				}).catch(error=>{
					console.log(error);
				})
			},
			//通过按钮方法
			handerCheckCashPass(id,type,state){
//				console.log(id)
//				console.log(type)
				if(state === '0'){
					checkCash(id,1).then(res=>{
						// console.log('通过按钮返回的信息');
						// console.log(res);
						if(res.code == '1'){
							Message({
						        message: res.msg,
						        type: 'warning',
						        duration: 3 * 1000	
					    	});	
						}else if(res.code == '0'){
							this.handleFilter();
							Message({
						        message: res.msg,
						        type: 'success',
						        duration: 3 * 1000	
					    	});	
						}
					})
				}else if(state === '1'){
					Message({
					    message: this.$t('cash.auditHasPassed'),
					    duration: 3 * 1000	
					});
				}else if(state === '2'){
					Message({
					    message: this.$t('cash.theAuditHasBeenRejected'),
					    type: 'error',
					    duration: 3 * 1000	
					});
				}else{
					Message({
					    message: this.$t('cash.errOperation'),
					    type: 'error',
					    duration: 3 * 1000	
					});
				}
				
			},
			//驳回按钮方法
			handerCheckCashReject(id,type,state){
//				console.log(id)
//				console.log(type)
				if(state === '0'){
					checkCash(id,0).then(res=>{
						// console.log('驳回按钮返回的信息')
						// console.log(res)
						if(res.code == '1'){
							Message({
						        message: res.msg,
						        type: 'warning',
						        duration: 3 * 1000	
					    	});	
						}else if(res.code == '0'){
							this.handleFilter();
							Message({
						        message: res.msg,
						        type: 'success',
						        duration: 3 * 1000	
					    	});	
						}
					})
				}else if(state === '1'){
					Message({
					    message: this.$t('cash.alreadyPassed'),
					    type: 'warning',
					    duration: 3 * 1000	
					});
				}else if(state === '2'){
					Message({
					    message: this.$t('cash.notRepeatOperation'),
					    type: 'warning',
					    duration: 3 * 1000	
					});
				}else{
					Message({
					    message: this.$t('cash.errOperation'),
					    type: 'error',
					    duration: 3 * 1000	
					});
				}
			},
		
			//打款
			handerCheckCashPay(id,state){
				if(state === '1'){
					withdrawCashPay(id).then(res=>{
						// console.log('打款按钮返回的信息')
						// console.log(res)
						if(res.code == '1'){
							Message({
						        message: res.msg,
						        type: 'warning',
						        duration: 3 * 1000	
					    	})
						}else if(res.code == '0'){
							this.handleFilter();
							Message({
						        message: res.msg,
						        type: 'success',
						        duration: 3 * 1000	
					    	})
						}else{
							Message({
						        message: res.msg,
						        type: 'error',
						        duration: 3 * 1000	
					    	})
						}
					})
				}else if(state === '0'){
					Message({
					    message: this.$t('cash.audit'),
					    duration: 3 * 1000	
					});
				}else if(state === '2'){
					Message({
					    message: this.$t('cash.notMakeMoney'),
					    type: 'error',
					    duration: 3 * 1000	
					});
				}else {
					Message({
					    message: this.$t('cash.alreadyMadeMoney'),
					    duration: 3 * 1000	
					});
				}
			},
			//点击搜索 查询提现列表
		    handleFilter() {
		    	//查询商户的参数
		    	const searchCashData = {
			    	state : this.searchCashData.State,
					userId : this.searchCashData.userId,
					bankname : this.searchCashData.bankname,
					type:this.searchCashData.Type,
					startDate : this.searchCashData.startDate,
					endDate : this.searchCashData.endDate,
					page : this.searchCashData.page,
					pageSize : this.searchCashData.pageSize,
			    }
		    	this.formatObj(searchCashData);
//				if(searchCashData.state === ''){
//					searchCashData.state = null;
//				}
//				if(searchCashData.userId === ''){
//					searchCashData.userId = null;
//				}
//				if(searchCashData.bankname === ''){
//					searchCashData.bankname = null;
//				}
//				if(searchCashData.type === ''){
//					searchCashData.type = null;
//				}
//				if(searchCashData.startDate === ''){
//					searchCashData.startDate = null;
//				}
//				if(searchCashData.endDate === ''){
//					searchCashData.endDate = null;
//				}
		    	if(searchCashData.state == '未审核'){
						searchCashData.state = '0'
		    	}
		    	if(searchCashData.state == '审核通过'){
						searchCashData.state = '1'
		    	}
		    	if(searchCashData.state == '审核驳回'){
						searchCashData.state = '2'
		    	}
		    	if(searchCashData.state == '已打款'){
						searchCashData.state = '3'
		    	}
		    	if(searchCashData.type == '支票'){
						searchCashData.type = '0'
		    	}
		    	if(searchCashData.type == '网银'){
						searchCashData.type = '1'
		    	}
		    	// console.log('设备查询向后台发送的数据')
		    	// console.log(searchCashData)
			    this.getWithdrawCashList(searchCashData);
		    },
			//pageSize 改变时会触发
		    handleSizeChange(val) {
		        this.searchCashData.pageSize = val;
//		        console.log(this.searchCashData)
		        this.handleFilter();
		    },
		    //currentPage 改变时会触发
		    handleCurrentChange(val) {
		        this.searchCashData.page = val;
		        this.handleFilter();
		    },
		    formatObj(obj){
				let arr = Object.keys(obj);
				for(let i = 0;i<arr.length;i++){
					if(obj[arr[i]] === ''){
						obj[arr[i]] = null;
					}
				}
			},
		}
	}

</script>

<style scoped>
	.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  /*.el-input{
  	width: 200px;
  }*/
</style>